<template>
	<view class="register_container">
		<view class="register_box">
			<view class="register_all">
				<view class="register_top_box">
					<image :src="imgRegister" mode="" class="register_top_img"></image>
				</view>

				<view class="register_input_box">
					<u-input v-model="registerObj.phone" :border="false" :clearable="false" placeholder="请输入手机号"
						placeholder-style="font-family: Source Han Sans CN;font-weight: 400;font-size: 34rpx;color: #999999;" />
				</view>

				<view class="input_code_box">
					<view class="input_code">
						<u-input v-model="registerObj.code" type="number" :border="false" :clearable="false"
							placeholder="请输入验证码"
							placeholder-style="font-family: Source Han Sans CN;font-weight: 400;font-size: 34rpx;color: #999999;" />
					</view>
					<view class="code_title" @click="sendCodeBtn">
						{{ send ? '获取验证码' : second + 's重新发送' }}
					</view>
				</view>

				<view class="register_input_box">
					<u-input v-model="registerObj.password" :border="false" placeholder="请输入密码" :clearable="false"
						placeholder-style="font-family: Source Han Sans CN;font-weight: 400;font-size: 34rpx;color: #999999;" />
				</view>

				<view class="register_input_box">
					<u-input v-model="registerObj.invitationCode" :border="false" :clearable="false"
						placeholder="请填写邀请码"
						placeholder-style="font-family: Source Han Sans CN;font-weight: 400;font-size: 34rpx;color: #999999;" />
				</view>

				<view class="register_btn_box">
					<view class="register_btn" @click="handleRegister">
						注 册
					</view>
					<view class="login_btn">
						已有账号 去登录
						<view class="login_right_box">
							>>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgRegister: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668dffe5d06f1_1720582117.png',
				registerObj: {
					phone: '',
					code: '',
					password: '',
					invitationCode: ''
				},
				send: true, //验证码按钮状态
				second: 0, //显示倒计时
				s: 60, //默认倒计时
				uuid: ''
			}
		},
		onLoad(options) {
			this.uuid = options.id
			this.getUserPosterInfo()
		},
		methods: {
			//验证码按钮点击
			sendCodeBtn() {
				let that = this;
				//防连点
				if (!that.send) {
					return false
				}
				this.send = false;
				that.time();
				if (this.phoneValue == '') {
					this.second = this.s
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					})
					return;
				} else {
					that.getCode()
				}
			},

			//倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(() => {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval)
					} else {
						that.second--
					}
				}, 1000)
			},

			// 获取验证码接口
			getCode() {
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserGetSmsCode',
					method: 'POST',
					data: {
						phone: this.registerObj.phone
					},
					success: res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 通过id获取用户邀请码接口
			getUserPosterInfo() {
				this.$request('/getUserPosterInfo', {
					uuid: this.uuid,
				}, 'GET').then(res => {
					if (res.code == 1) {
						let value = res.data.values.split('=')
						this.registerObj.invitationCode = value[1]
					} else {
						uni.showToast({
							title: '查询邀请码失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 微信登录接口-code
			xcxGetUserInfo(val, phone) {
				this.$request('/xcxGetUserInfo', {
					code: val,
					phone: phone
				}, 'GET').then(res => {
					uni.setStorageSync('userWxOpenid', res.data)
				})
			},

			// 注册接口-新
			planPosterRegister() {
				this.$request('/planPosterRegister', {
					phone: this.registerObj.phone,
					code: this.registerObj.code,
					password: this.registerObj.password,
					share_code: this.registerObj.invitationCode
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.setStorageSync('h5-token', res.data.token)
						uni.setStorageSync('userInfo', res.data.userInfo)
						uni.setStorageSync('h5-isAgent', res.data.userInfo.is_agent)
						uni.login({
							provider: 'weixin', //使用微信登录
							success: function(loginRes) {
								that.xcxGetUserInfo(loginRes.code, that.registerObj.phone)
							}
						});
						uni.showToast({
							title: '注册成功',
							icon: 'none',
							success: ress => {
								setTimeout(() => {
									this.registerObj = {}
									uni.switchTab({
										url: '/pages/index/index'
									})
								}, 1200)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 点击注册
			handleRegister() {
				if (this.registerObj.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (this.registerObj.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (this.registerObj.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (this.registerObj.invitationCode == '') {
					uni.showToast({
						title: '请输入邀请码',
						icon: 'none'
					})
					return
				} else {
					this.planPosterRegister()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.register_container,
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.register_container {
		background-image: url('https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668e00191625b_1720582169.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		.register_box {
			padding: 378rpx 18rpx 0;

			.register_all {
				position: relative;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 0px 0px;
				padding: 70rpx 65rpx 67rpx;

				.register_top_box {
					position: absolute;
					top: -34rpx;
					left: 50%;
					transform: translateX(-50%);

					.register_top_img {
						width: 326rpx;
						height: 63rpx;
					}
				}

				.register_input_box {
					display: flex;
					align-items: center;
					height: 106rpx;
					background: #F4F8FB;
					border-radius: 14rpx;
					padding-left: 32rpx;
					margin-bottom: 27rpx;
				}

				.register_input_box:last-child {
					display: flex;
					align-items: center;
					height: 106rpx;
					background: #F4F8FB;
					border-radius: 14rpx;
					padding-left: 32rpx;
					margin-bottom: 0;
				}

				.input_code_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 106rpx;
					background: #F4F8FB;
					border-radius: 14rpx;
					padding: 0 14rpx 0 32rpx;
					margin-bottom: 27rpx;

					.code_title {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 206rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #0E255B;
					}
				}

				.register_btn_box {

					.register_btn {
						background: #0E255B;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFD79A;
						text-align: center;
						padding: 30rpx 0;
						margin: 52rpx 0 29rpx;
					}

					.login_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						height: 88rpx;
						background: #F4F8FB;
						border-radius: 14rpx;
						border: 1px solid #0E255B;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #0E255B;
						text-align: center;

						.login_right_box {
							position: absolute;
							top: 0;
							right: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 88rpx;
							height: 87rpx;
							background: #F0F4FF;
							border-radius: 0px 14rpx 14rpx 0px;
							border-left: 1px solid #0E255B;
							border-bottom: 1px solid #0E255B;
						}
					}
				}
			}
		}
	}
</style>